<template>
  <el-row id="product2" :gutter="30" v-bind:class="{ 'h-600' : !isA, 'h-1200': isA}">
    <h5>互联网视觉</h5>
    <!--<el-col :span="16" :offset="4" class="tubiao">-->
      <!--<el-col :span="12"><img src="../../assets/images/pro1.jpg" alt=""></el-col>-->
      <!--<el-col :span="12"><img src="../../assets/images/pro2.jpg" alt=""></el-col>-->
      <!--<el-col :span="12"><img src="../../assets/images/pro3.jpg" alt=""></el-col>-->
      <!--<el-col :span="12"><img src="../../assets/images/pro4.jpg" alt=""></el-col>-->
    <!--</el-col>-->
    <!--<ul class="cards" v-bind:class="{ 'cards transition' : isA, 'cards': !isA}" @click="toggle">-->
      <!--<li class="card card-1"><img src="../../assets/images/pro1.jpg"/>-->
        <!--<div class="content">-->
          <!--<h1>Out Food!</h1>-->
        <!--</div>-->
      <!--</li>-->
      <!--<li class="card card-2"><img src="../../assets/images/pro2.jpg"/>-->
        <!--<div class="content">-->
          <!--<h1>Out Food!</h1>-->
        <!--</div>-->
      <!--</li>-->
      <!--<li class="card card-3"><img src="../../assets/images/pro3.jpg"/>-->
        <!--<div class="content">-->
          <!--<h1>Out Food!</h1>-->
        <!--</div>-->
      <!--</li>-->
      <!--<li class="card card-3"><img src="../../assets/images/pro4.jpg"/>-->
        <!--<div class="content">-->
          <!--<h1>Out Food!</h1>-->
        <!--</div>-->
      <!--</li>-->
    <!--</ul>-->

    <ul class="card-stacks el-col el-col-22 el-col-offset-1" v-bind:class="{ 'cards transition' : isA, 'cards': !isA}" @click="toggle">
      <li class="stack stack-1 el-col el-col-12">
        <ul class="cards-down  el-col el-col-24">
          <li class="card card-2  el-col el-col-20"><img src="../../assets/images/pro1.jpg"/>
            <div class="content">
              <h1>Out Food!</h1>
            </div>
          </li>
          <li class="card card-3  el-col el-col-20"><img src="../../assets/images/pro2.jpg"/>
            <div class="content">
              <h1>Out Food!</h1>
            </div>
          </li>
        </ul>
      </li>
      <li class="stack stack-2 el-col el-col-12">
        <ul class="cards-down el-col el-col-24">
          <li class="card card-2  el-col el-col-20"><img src="../../assets/images/pro3.jpg"/>
            <div class="content">
              <h1>Out Food!</h1>
            </div>
          </li>
          <li class="card card-3 el-col el-col-20"><img src="../../assets/images/pro4.jpg"/>
            <div class="content">
              <h1>Out Food!</h1>
            </div>
          </li>
        </ul>
      </li>
    </ul>

  </el-row>
</template>
<style>
  .h-600 {height: 660px}
  .h-1200 {height: 1200px}
  #product2 {background: #48567e; -webkit-transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.22);
    transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.22);}
  #product2 h5 {margin-bottom: 56px; margin-top:40px;color: #ffffff}
  .tubiao {margin-bottom: 29px;}
  .tubiao .el-col {overflow: hidden}
  .tubiao img{width: 100%;display: block; margin-bottom: 30px;}

  ul.card-stacks {
    list-style-type: none;
    padding: 0;
    position: relative;
    cursor: pointer;
  }
  ul.card-stacks li.title {
    margin: 0 0 20px;
  }
  ul.card-stacks li.title h2 {
    font-weight: 700;
  }
  ul.card-stacks li.stack {
    position: absolute;
    left: 0px;
    -webkit-transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.02);
    transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.02);
  }
  ul.card-stacks li.stack ul.cards-down {
    position: relative;
    margin: 0 0 20px;
    padding: 20px;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  ul.card-stacks li.stack ul.cards-down li.card {
    -webkit-transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.22);
    transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.22);
    left: 0px;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
    background: #FFF;
    overflow: hidden;
    border-radius: 10px;
    position: absolute;
    top: 0px;
    box-shadow: 1px 2px 2px 0 #aaa;
  }
  ul.card-stacks li.stack ul.cards-down li.card img {
    max-width: 100%;
    padding: 5px;
    height: auto;
  }
  ul.card-stacks li.stack ul.cards-down li.card div.content {
    padding: 5px 10px;
  }
  ul.card-stacks li.stack ul.cards-down li.card.card-2 {
    z-index: 9;
    -webkit-transform: rotateZ(-7deg);
    transform: rotateZ(-7deg);
  }
  ul.card-stacks li.stack ul.cards-down li.card.card-3 {
    z-index: 8;
    -webkit-transform: rotateZ(5deg);
    transform: rotateZ(5deg);
  }
  ul.card-stacks.transition li.stack.stack-1 {
    left: 0px;
  }
  ul.card-stacks.transition li.stack.stack-2 {
    left: 51%;
  }
  ul.card-stacks.transition li.stack.stack-3 {
    left: 1000px;
  }
  ul.card-stacks.transition li.stack ul.cards-down li.card {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  ul.card-stacks.transition li.stack ul.cards-down li.card.card-2 {
    top: 500px;
  }
</style>
<script>
  export default {
    data: function(){
      return {
        isA: false,
        isB: false
      };
    },

    methods: {
      toggle: function(){
        this.isA = !this.isA;
      },
      toggle2: function(){
        this.isB = !this.isB;
      }
    }
  };
</script>
